<template>
  <view class="p-pop-x">
    <view class="word">
      <view class="_content">
        <view>国外订单取消，老板急疯了！</view>
        <view>为渡过难关，赔本售卖！</view>
        <view>只为给工人发工资！本单可立减{{ detail.totalDiscountAmount }}元，</view>
        <view>点击“确认”立即优惠{{ detail.totalDiscountAmount }}元</view>
      </view>
      <view class="_bottom">
        <view class="_cancel" @click="handleCancel">取消</view>
        <view class="_confirm" @click="handleConfirm">确认</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PPop5',
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    handleCancel() {
      this.$emit('close');
      this.$XTrack('onDiscountPayCancelClick');
    },
    handleConfirm() {
      this.$emit('submit');
      // 振动
      wx.vibrateLong();
      this.$XTrack('onDiscountPayClick');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    background-color: #7F7F7F; height: 100vh;
    .word{
      width: 600px; position: absolute; background-color: #fff; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); border-radius: 12px;
      ._content{
        padding: 60px 30px; line-height: 1.8; font-size: 30px;; box-sizing: border-box;color: #333; text-align: center;
      }
      ._bottom{
        border-top: 1px solid #F3F4F6;display: flex;
        ._cancel{
          flex: 1;padding: 30px 0;display: flex;justify-content: center;align-items: center;font-size: 32px;color: #000000;border-right: 1px solid #F3F4F6;
        }
        ._confirm{
          position: relative;flex: 1;padding: 30px 0;display: flex;justify-content: center;align-items: center;font-size: 32px;color: #CC5F40;
        }
      }
    }
  }
</style>
